

const UserBasicInfoCompact = ({ basicInfo }) => {

    return (
        <>
            {basicInfo && <div className="w-full flex flex-row items-center justify-start px-2 mx-2 my-1">
               
                <div className="flex-1 flex flex-row items-center justify-center">
                    <div className="flex text-left text-sm text-[#969696] p-2">区域:</div>
                    <div className="flex-1 text-left text-sm min-w-36 p-2">{basicInfo.provinceName}</div>
                </div>
                <div className="flex-1 flex flex-row items-center justify-center">
                    <div className="flex text-left text-sm text-[#969696] p-2">选科:</div>
                    <div className="flex-1 text-left text-sm min-w-36 p-2 ">{basicInfo.subjects}</div>
                </div>

                <div className="flex-1 flex flex-row items-center justify-center">
                    <div className="flex text-left text-sm text-[#969696] p-2">总分</div>
                    <div className="flex-1 text-left text-sm min-w-36 p-2 ">{basicInfo.score}</div>

                </div>
                <div className="flex-1 flex flex-row items-center justify-center">
                    <div className="flex text-left text-sm text-[#969696] p-2">预测位次</div>
                    <div className="flex-1 text-left text-sm min-w-36 p-2 ">{basicInfo.rank}</div>

                </div>
            </div>
            }
        </>
    )
}

export default UserBasicInfoCompact